<template>
  <div id="app">
    <!-- 表单  -->
    <el-row style="float: left; margin-left: 66px;margin-top: 17px;">
      杆塔编号:<el-input placeholder="请输入需要查询的编号" v-model="gcode" style="width:150px;">
      </el-input>
      线路编号:<el-select v-model="xlnum" clearable>
        <el-option v-for="item in xianlus" :label="item.xlnum" :value="item.xlnum" :key="item.id"></el-option>
      </el-select>
      状态:<el-select v-model="isstatus" style="width:150px;" clearable>
        <el-option v-for="item in typeoptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="chanxun" style="margin-left: -3px;">查询</el-button>
      <el-button type="primary" icon="el-icon-circle-plus" style="margin-left: -3px;" @click="dialogFormVisible = true">添加杆塔</el-button>
      <!--点击添加杆塔按钮出现添加对话框 即表单添加  -->
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 1000px;margin: auto;">
      <el-table-column prop="gid" label="编号" width="150px"></el-table-column>
      <el-table-column prop="gcode" label="杆塔编号" width="150px"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="150px"> </el-table-column>
      <el-table-column prop="xianlu.xlnum" label="所属路线" width="150px"></el-table-column>
      <el-table-column prop="runtype" label="运行状态"></el-table-column>
      <el-table-column prop="isstatus" label="状态" width="150px">
        <template slot-scope="scope">
          <el-switch @change="changeStatus($event,scope.row,scope.$index)" v-model="scope.row.isstatus" :active-value="1"
            :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <!-- 表格里面操作的按钮 -->
        <template slot-scope="scope">

          <el-button size="small" @click="handleupdate(scope.$index,scope.row)">修改</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 表格里面修改按钮的对话框 -->
    <el-dialog title="修改杆塔" :visible.sync="hanFormupdate" width="40%" style="text-align: center;">
      <el-form :model="ganta">
        <el-form-item label="编号" prop="gid">
          <el-input v-model="ganta.gid" disabled style="width: 220px;margin-left: 28px;"></el-input>
        </el-form-item>

        <el-form-item label="杆塔编号" prop="ganme">
          <el-input v-model="ganta.gcode" style="width: 220px;"></el-input>
        </el-form-item>

        <el-form-item label="线路编号" prop="xid">
          <el-select v-model="ganta.xianlu" value-key="id">
            <el-option v-for="item in xianlus" :label="item.xlnum" :value="item" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="启用状态" prop="enable">
          <el-radio v-model="ganta.isstatus" :label="1">启用</el-radio>
          <el-radio v-model="ganta.isstatus" :label="0">不启用</el-radio>
        </el-form-item>
      </el-form>
      <!-- Form -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeMe()">确 定</el-button>
      </div>
      <!--嵌套表单的 Dialog的结束-->
    </el-dialog>
    <el-pagination @current-change="handleCurrentChange" @prev-click="handleCurrentChange" @next-click="handleCurrentChange"
      background layout="prev,pager,next,total,jumper" :total="total" :page-size="
      size"></el-pagination>

    <el-dialog title="添加杆塔" :visible.sync="dialogFormVisible" width="40%" style="text-align: center;">
      <el-form :model="addganta">
        <el-form-item label="杆塔编号" prop="ganme">
          <el-input v-model="addganta.gcode" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="线路编号" prop="xid">
          <el-select v-model="addganta.xianlu" value-key="id" clearable>
            <el-option v-for="item in xianlus" :label="item.xlnum" :value="item" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态" prop="enable">
          <el-radio v-model="addganta.isstatus" :label="1">启用</el-radio>
          <el-radio v-model="addganta.isstatus" :label="2">不启用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
      <!--嵌套表单的 Dialog的结束-->
    </el-dialog>

  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {

      return {
        typeoptions: [{
          label: '启用',
          value: 1
        }, {
          label: '未启用',
          value: 0
        }],
        linecodes: [],
        gcode: '',
        xlnum: '',
        isstatus: '',

        tableData: [],
        total: 0,
        size: 5, //这个决定每一页有几条数据
        // 对话框
        dialogFormVisible: false,
        //表格里面修改按钮 出现对话框
        hanFormupdate: false,

        type: '',
        click: 'all',
        ganta: {
          gid: '',
          gcode: '',
          isstatus: '',
          xianlu: {},
          runtype:'正常'
        },
        addganta: {
          gid: '',
          gcode: '',
          isstatus: 1,
          xianlu: {},

        },
        xianlus: []

      }
    },
    mounted() {
      //在VUE页面DOM结构渲染完毕，数据加载之前，自动调用的钩子函数。
      this.getData(1, 5)
      this.selectXianlu()
    },

    methods: {
      chanxun: function() {
        var self = this
        this.click = 'chaxun'
        let postData = this.$qs.stringify({
          gcode: this.gcode,
          xlnum: this.xlnum,
          isstatus: this.isstatus,
          pageno: 1,
          pagesize: this.size
        })


        axios.post("http:localhost:8086/ganta/where", postData)
          .then(vs => {
            this.tableData = vs.data.list
            this.tableData.forEach(function(item) {
              item.createtime = self.aaa(item.createtime)
            })
            this.total = vs.data.total
          }).catch(r => {
            console.log(r)
          })
      },

      changeStatus(data, b, index) {
        console.log(data)
        console.log(b);
        let postData = this.$qs.stringify({
          isstatus: data,
          gid: b.gid
        })

        axios.post("http:localhost:8086/ganta/update", postData).then(vs => {
          if (vs.status == 200) {
            this.$message("修改成功")
            this.getData(1, this.size)
          } else {
            this.$message("修改失败")
            this.getData(1, this.size)
          }
        })

      },
      //分页控件的当前页码发生改变
      handleCurrentChange(c) {
        var self = this
        //参数c就是当前页面
        if (this.click == 'all') {
          this.getData(c, this.size)
        } else if (this.click == 'chaxun') {
          let postData = this.$qs.stringify({
            gcode: this.gcode,
            xlnum: this.xlnum,
            isstatus: this.isstatus,
            pageno: c,
            pagesize: this.size
          })
          axios.post("http:localhost:8086/ganta/where", postData)
            .then(vs => {
              this.tableData = vs.data.list
              this.tableData.forEach(function(item) {
                item.createtime = self.aaa(item.createtime)
              })
              this.total = vs.data.total
            }).catch(r => {
              console.log(r)
            })
        }


      },

      getData: function(pageno, pagesize) {
        var self = this
        let postData = this.$qs.stringify({
          pageno: pageno,
          pagesize: this.size
        })
        axios.post("http:localhost:8086/ganta/all",
          postData
        ).then(vs => {
          this.tableData = vs.data.list
          this.total = vs.data.total
          console.log(this.tableData)
          this.tableData.forEach(function(item) {
            item.createtime = self.aaa(item.createtime)
            console.log('xianlu', self.tableData)
          })
        })

      },
      //点击启用 进行隐藏替换效果





      //修改
      handleupdate(index, row) { //表格里面绑定修改按钮
        //这个方法是弹出弹框 配合上面配合上面 add() 方法进行修改
        this.index = index;
        this.hanFormupdate = true;
        this.ganta = row;
        console.log(this.ganta)
      },
      /**
       * 修改杆塔

       */

      closeMe: function() {

        this.ganta.createtime = this.ganta.createtime.split(' ')[0];
        console.log(this.ganta)
        axios.post('http:localhost:8086/ganta/updateGanta', this.ganta).then(vs => {
          if (vs.status == 200) {
            this.$message('修改成功')
            this.hanFormupdate = false
            this.getData(1, this.size)
            this.ganta = {}
          }
        })
      },
      /**
       * 添加杆塔

       */

      add: function() {
        console.log("add", this.addganta)
        this.addganta.gcode = "g00" + this.addganta.gcode
        axios.post("http:localhost:8086/ganta/updateGanta", this.addganta).then(vs => {
          if (vs.status == 200) {
            this.dialogFormVisible = false
            this.addganta = {}
            this.addganta.isstatus = 1
            this.$message('添加成功')
            this.getData(1)
          }
        })


      },

      handleopen(index, row) { //表格里面启用事件
        this.$confirm('此操作将停用该路线, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({ //出现对应执行之后的消息框
            type: 'success',
            message: '启用成功!',
          });
          this.tableData[index].isstatus = 1;
        }).catch(() => {
          this.$message({ //出现对应执行之后的消息框
            type: 'info',
            message: '已取消启用操作'
          });
        });
        //自动查询更新信息
        this.pager(1);
      },
      handleEdit(index, row) { //表格里面停用事件
        this.$confirm('此操作将停用该路线, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({ //出现对应执行之后的消息框
            type: 'success',
            message: '停用成功!',
          });
          this.tableData[index].isstatus = 2;
        }).catch(() => {
          this.$message({ //出现对应执行之后的消息框
            type: 'info',
            message: '已取消停用操作'
          });
        });
        this.pager(1);
      },



      ////////////////////////////////////////////
      tableRowClassName({ //设置指定行 变色
        row,
        rowIndex
      }) { //是表格里面指定的行数变色
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 2) {
          return 'success-row';
        }
        return '';
        /*  这个是单行进行变色
        let index = rowIndex + 0;
                   	if(index %2 == 0){
                   	    return 'warning-row'
                   	}*/
      },
      aaa: function(asd) {
        var date = new Date(asd) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()

        console.log(Y + M + D + h + m + s);
        return Y + M + D + h + m + s;
      },
      selectXianlu: function() {
        axios.post("http:localhost:8086/xianlu/selectXianlu").then(vs => {
          this.xianlus = vs.data
        })
      }
    }
  }
</script>
<style scoped="scoped">

</style>
